import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import http from '../../api/http'
import { Divider, Avatar, List, Tag, Input, Button, Modal } from 'antd';
function Index() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [type] = useSearchParams()
  const [list, setList] = useState()
  const [lists, setLists] = useState()
  const [huifuId, sethuifuId] = useState()
  const [title, settitle] = useState()
  const [data, setdata] = useState([])
  const id = type.get('id')
  const getdata = () => {
    http.get(`/article/${id}`).then((res) => {
      console.log(res);
      if (res.status === 200) {
        setdata(res.data)
      }

    })

  }
  useEffect(() => {
    getdata()
  }, [])
  const handOk = (e) => {
    console.log(e);

    setList(e)
  }
  const handOks = (e) => {
    console.log(e);

    setLists(e)
  }
  const fs = () => {
    http.post('/discuss', {
      userId: 47529555,
      content: list,

      articleId: id

    }).then((res) => {
      console.log(res);
      if (res.status === 200) {
        getdata()
      }

    })
  }
  const handleOk = () => {

    http.post('/discuss', {
      userId: 47529555,
      content: lists,
      commentId: huifuId,
      articleId: id

    }).then((res) => {
      console.log(res);
      if (res.status === 200) {
        setIsModalOpen(false);
        getdata()
      }

    })
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (

    <div style={{ width: '900px', margin: '35px auto', padding: '30px', boxShadow: '2px 4px 8px #ccc' }}>
      <p style={{ fontSize: '20px', fontWeight: 'bold' }}>{data.title}</p>
      <p style={{ fontSize: '12px', color: '#ccc' }}>发布时间：{data.createdAt}&emsp;&emsp;阅读量：{data.viewCount}
        &emsp;&emsp; {
          data.tags && data.tags.map((item, index) => {
            return <Tag color='red' key={index}>{item.name}</Tag>
          })
        }
      </p>
      <Divider orientation="left">评论：（ {data.comments?.length || 0} ）</Divider>
      <p style={{ fontSize: '15px' }}>{data.content}</p>
      <List
        itemLayout="horizontal"
        dataSource={data.comments}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
              title={<div>
                <span>{item.user?.username}</span>
                &emsp;&nbsp;
                <span>{item.user?.createdAt}</span>


              </div>}
              description={<div>
                <div dangerouslySetInnerHTML={{ __html: item.content }} />
                {
                  item.replies.length > 0 && item.replies && (
                    <div>
                      <span>回复：</span>
                      {
                        item.replies.map((item, index) => {
                         return <List.Item.Meta
                          key={index}
                            avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
                            title={<div>
                              <span>wsn</span>
                              &emsp;&nbsp;
                              <span>{item.user?.createdAt}</span>


                            </div>}
                             description={
                               <div dangerouslySetInnerHTML={{ __html: item.content }} />
                             }

                          >

                          </List.Item.Meta>
                        })
                      }
                    </div>
                  )
                }
              </div>}
            />
            <a onClick={() => {
              setIsModalOpen(true)
              settitle(item.user?.username)
              sethuifuId(item.id)
            }}>回复</a>
          </List.Item>
        )}
      />
      <Input.TextArea
        value={list}
        onChange={(e) => handOk(e.target.value)}
      />
      <Button onClick={fs}>发送评论</Button>
      <Modal
        title={<div>@ {title}</div>}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        cancelText='取消'
        okText='确定'
      >
        <Input.TextArea
          value={lists}
          onChange={(e) => handOks(e.target.value)}
        />

      </Modal>




    </div>
  )
}

export default Index
